<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>easymap-ui - Documentation</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <li class="nav-link nav-home-link"><a href="index.html">easymap-ui</a></li><li class="nav-heading nav-heading-main">Classes</li><li class="nav-heading nav-heading-sub"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="DrawTool.html">DrawTool</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#clear">clear</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#draw">draw</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#drawCircle">drawCircle</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#drawLineString">drawLineString</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#drawPoint">drawPoint</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#drawPolygon">drawPolygon</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#drawRectangle">drawRectangle</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#getEditTool">getEditTool</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#toggleEdit">toggleEdit</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="DrawTool.html#toggleSnap">toggleSnap</a></span></li><li class="nav-heading nav-heading-sub"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="EasyMap.html">EasyMap</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#animate">animate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#getCenter">getCenter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#getExtent">getExtent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#getMapCanvas">getMapCanvas</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#getMapElement">getMapElement</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#getViewElement">getViewElement</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#getZoom">getZoom</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#initDrawTool">initDrawTool</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#initMap">initMap</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#setCenter">setCenter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#setTileGridVisible">setTileGridVisible</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="EasyMap.html#setZoom">setZoom</a></span></li><li class="nav-heading nav-heading-sub"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="SnapTool.html">SnapTool</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="SnapTool.html#getPixelTolerance">getPixelTolerance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="SnapTool.html#getSnapPoint">getSnapPoint</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="SnapTool.html#setActive">setActive</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="SnapTool.html#setPixelTolerance">setPixelTolerance</a></span></li>
</nav>

<div id="main">
    

    



    









    


    <section class="readme">
        <article><h2>1、安装依赖</h2>
<pre class="prettyprint source"><code>npm i lzugis-easymap --save
</code></pre>
<h2>2、引用</h2>
<h3>1) cdn</h3>
<pre class="prettyprint source lang-html"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;easymap.css&quot;>
&lt;script src=&quot;easymap.js&quot;>&lt;/script>
</code></pre>
<h3>2) npm</h3>
<pre class="prettyprint source lang-js"><code>import 'lzugis-easymap/lib/easymap.css'
const EasyMap = require('lzugis-easymap/lib/easymap.js')
</code></pre>
<h2>3、使用</h2>
<h3>1) map初始化</h3>
<pre class="prettyprint source lang-js"><code>const map = new EasyMap('app', {
  zoom: 4.5,
  center: [105.94346832861672, 38.08154819171156],
  tileType: 'OSM'
})
</code></pre>
<h3>2) draw工具</h3>
<pre class="prettyprint source lang-js"><code>var drawTool = map.initDrawTool(true);
document.getElementById('drawPoint').addEventListener('click', () => {
  drawTool.drawPoint()
})
document.getElementById('drawLine').addEventListener('click', () => {
  drawTool.drawLineString()
})
document.getElementById('drawPolygon').addEventListener('click', () => {
  drawTool.drawPolygon()
})
document.getElementById('drawRect').addEventListener('click', () => {
  drawTool.drawRectangle()
})
document.getElementById('drawCircle').addEventListener('click', () => {
  drawTool.drawCircle()
})
</code></pre></article>
    </section>






</div>

<br class="clear">

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>